<template>
 <div class="cart-btn-bar">
     <div class="check-content">
        <check-btn class="check-all" :is-checked="isSelectAll" @click.native="checkClick"></check-btn> 
        <span>全选</span>
    </div>
    <div class="price">
        合计：{{totalPrice}}
    </div>
    <div class="calculate" @click="calClick">
        去结算({{checkLength}})
    </div>
 </div>
</template>

<script>
import CheckBtn from '@/components/content/checkbtn/CheckBtn'


 export default {
     components: {
         CheckBtn
     },
   data () {
     return {

     }
   },
   created() {

   },
   methods: {
       totalPrice() {
           return $store.state.cartList.filter(item => {
               return item.checked
           }).reduce((preValue, item) => {
             return preValue + item.price * item.count
           }, 0).toFixed(2)
       },
       checkLength() {
           return this.$store.cartList.filter(item => item.checked).length
       },
       checkClick() {
           if(this.isSelectAll) {
               this.cartList.forEach(item => item.checked = false)
           } else {
               this.cartList.forEach(item => item.checked = true)
           }
       },
       calClick() {
           if(!this.isSelectAll) {
      this.$toast.show('请选择要购买的宝贝', 2000)
           }
       }
   },
   computed: {
       isSelectAll() {
        //    checkLength === this.cartList.length
        if(this.cartList.length === 0) return false
        return !this.cartList.find(item => !item.checked)
       }
   }
 }
</script>

<style scoped>
.cart-btn-bar {
    display: flex;

    height: 40px;
    line-height: 40px;
    background-color: rgb(255, 0, 0);

    position: relative;
}
 .check-all {
     width: 20px;
     height: 20px;
     line-height: 20px;
 }
 .check-content {
     display: flex;
     /* line-height: 20px; */
 }
</style>
